<template>
    <div class="containter">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>科泰CRM</span>
                <div><span class="msg" v-show="msgStatus">账号或密码错误</span></div>
            </div>

            <div class="text item">
                <el-form status-icon ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input type="type" v-model="ruleForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                username: "",
                password: "",
            },
            msgStatus: false,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios
                        .post(
                            "/api/customer/login",
                            {
                                username: this.ruleForm.username,
                                password: this.ruleForm.password,
                            }
                        )
                        .then((resp) => {
                            // debugger
                            if (resp.data) {
                                this.msgStatus = false;
                                localStorage.setItem("token",resp.data)
                                this.$router.push("/main");
                            } else {
                                this.msgStatus = true;
                            }
                        })
                        .catch((error) => {
                            debugger;
                            console.log(error);
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style>
.containter {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix {
    font-weight: bold;
    font-size: 2rem;
}

.clearfix .msg {
    color: red;
    font-size: 16px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 480px;
    /* height: 400px; */
}
</style>